<template>
  <div>
    <transition :name="trasn">
      <div class="question-all" v-if="isShow">
        <div :class="`question-item-0${answerId}`">
          <img class="bg" :src="`/assets/imgs/problem${answerId === 4 ? 2 : answerId}-bg.png`" alt="" />
          <img class="ques" :src="`/assets/imgs/problem${answerId}-title.png`" alt="" />
          <div class="answer">
            <template v-for="(item, index) of options">
              <img
                class="question-item"
                :src="require(`../assets/problem${answerId}-${item}.png`)"
                :key="index"
                @click="handleSelectAnswer(item)"
                alt=""
              />
            </template>
          </div>
          <div
            class="medal-tips"
            @click="
              isTipsShow = true
              isTipsShowImg = false
            "
            :class="`tips-pis-${answerId}`"
          >
            <img class="glal-img" src="../assets/gold_medal.png" alt="" srcset="" />
            <img v-show="isTipsShowImg" class="text-img" src="../assets/point_tips.png" alt="" srcset="" />
          </div>
        </div>
      </div>
    </transition>
    <transition name="fadeInOut">
      <div class="tips-dialog" v-if="isTipsShow" @click="isTipsShow = false">
        <img :src="`/assets/imgs/know_0${answerId}.png`" alt="" />
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    answerId: {
      type: Number,
      default: 0,
    },
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    trasn() {
      if (this.answerId === 1 || this.answerId === 3) return "fade"
      else if (this.answerId === 2 || this.answerId === 4) return "move"
      return "fade"
    },
  },
  data() {
    return {
      isTipsShow: false,
      options: ["A", "B", "C", "D"],
      rights: ["D", "A", "C", "C"],
      isTipsShowImg: true,
    }
  },

  methods: {
    handleSelectAnswer(answer) {
      this.$emit("trigger", {
        index: this.answerId - 1,
        answer,
        isRight: this.rights[this.answerId - 1] == answer,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.question-all {
  // position: relative;
  .question-mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #000000aa;
  }

  .question-tip-mask {
    z-index: 101;
  }
  .question-item-01 {
    position: absolute;
    right: 5%;
    bottom: 14vw;
    opacity: 1;
    width: 82vw;
    .bg {
      width: 100%;
    }
    .ques {
      position: absolute;
      top: 42%;
      left: 50%;
      width: 70%;
      transform: translateX(-50%);
    }

    .answer {
      position: absolute;
      top: 10%;
      width: 70%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      left: 50%;
      transform: translateX(-50%);
      img {
        width: 50%;
        margin-top: 10px;
      }
    }
  }

  .question-item-02,
  .question-item-04 {
    position: absolute;
    transform: translate(-50%, 0);
    opacity: 1;
    top: 0;
    left: 50%;
    width: 80vw;
    .bg {
      width: 100%;
    }
    .ques {
      position: absolute;
      top: 42%;
      left: 50%;
      width: 75%;
      transform: translateX(-50%);
    }

    .answer {
      position: absolute;
      top: 62%;
      width: 70%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      left: 50%;
      transform: translateX(-50%);
      img {
        width: 45%;
        margin-top: 10px;
      }
    }
  }

  .question-item-03 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 20vw;
    width: 80vw;
    .bg {
      width: 100%;
    }
    .ques {
      position: absolute;
      top: 13%;
      left: 50%;
      width: 75%;
      transform: translateX(-50%);
    }

    .answer {
      position: absolute;
      top: 30%;
      width: 75%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      left: 50%;
      transform: translateX(-50%);
      img {
        width: 45%;
        margin-top: 10px;
      }
    }
  }

  // .question-item-04 {
  //   position: relative;
  //   .bg {
  //     width: 60vw;
  //   }
  //   .ques {
  //     position: absolute;
  //     top: 42%;
  //     left: 50%;
  //     width: 35vw;
  //     transform: translateX(-50%);
  //   }

  //   .answer {
  //     position: absolute;
  //     top: 12%;
  //     width: 26vw;
  //     display: flex;
  //     flex-wrap: wrap;
  //     justify-content: space-between;
  //     flex-direction: column;
  //     align-items: center;
  //     left: 50%;
  //     transform: translateX(-50%);
  //     img {
  //       width: 80%;
  //       margin-top: 5px;
  //     }
  //   }
  // }

  .ani-ques-1 {
    opacity: 1;
    transition: opactity 1s linear;
  }
  .question-item {
    transition: transform 0.1s ease-in;
    &:hover {
      // transform: translate(0.95);
      transform: scale(0.95);
    }
  }

  .medal-tips {
    position: absolute;
    width: 25vw;
    .glal-img {
      width: 80%;
    }
    .text-img {
      position: absolute;
      width: 50%;
      right: 20%;
      top: 50%;
      animation: slideInUp 1s 0.2s infinite;
    }
  }

  .tips-pis-1 {
    left: -5vw;
    top: 5%;
  }

  .tips-pis-2,
  .tips-pis-4 {
    left: -10vw;
    top: 10%;
  }

  .tips-pis-3 {
    left: -10vw;
    top: -3%;
  }
}
.tips-dialog {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
  img {
    width: 80%;
    margin-bottom: 15vh;
    margin: 0 auto;
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

// @media only screen and (max-height: 800px) {
//   .question-all {
//     .question-item-01,
//     .question-item-02,
//     .question-item-03,
//     .question-item-04 {
//       width: 67vw;
//     }
//   }
// }
</style>
